<template>
	<!-- 是否启用 vue-router 模式。 
        启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 
    -->
	<el-menu
		default-active="1"
		active-text-color="#79bbff"
		background-color="#1e2e3d"
		text-color="#fff"
		class="el-menu-vertical-demo"
		:collapse="!isCollapse"
		router
	>
		<el-sub-menu v-for="item in menuList" :key="item.id" :index="item.path">
			<template #title>
				<el-icon><component :is="menuIconCom(item.iconCls)" /></el-icon>
				<span>{{ item.label }}</span>
			</template>

			<el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.path"
				>&nbsp;&nbsp;{{ subItem.label }}</el-menu-item
			>
		</el-sub-menu>
	</el-menu>
</template>

<script setup lang="ts">
import { useMenuStore } from '@/stores/modules/menu'
import { computed, inject } from 'vue'
import {
	Location,
	Grid,
	Setting,
	Service,
	User,
	Aim,
	Goods,
	Present,
	Calendar,
	OfficeBuilding,
	School
} from '@element-plus/icons-vue'
// defineProps({ isCollapse: Boolean })
const menuStore = useMenuStore()
const menuList = computed(() => menuStore.list) //动态菜单数据

const menuIconCom = (icon: string) => {
	switch (icon) {
		case 'el-icon-user':
			return Location
		case 'el-icon-setting':
			return Setting
		case 'el-icon-service':
			return Service
		case 'el-icon-user-solid':
			return User
		case 'el-icon-office-building':
			return Aim
		case 'el-icon-goods':
			return Goods
		case 'el-icon-camera':
			return Present
		case 'el-icon-help':
			return Calendar
		case 'el-icon-student':
			return OfficeBuilding
		case 'el-icon-project':
			return School
		default:
			return Grid
	}
}

const isCollapse = inject('isCollapse')
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
}
</style>
